<div class="space-6"></div>

{{#page.invoice}}
<div class="row">
	<div class="col-sm-10 col-sm-offset-1">
	 <!-- #section:pages/invoice -->
	 <div class="widget-box transparent">
	  <div class="widget-header widget-header-large">
		<h3 class="widget-title grey lighter">
			<i class="ace-icon fa fa-leaf green"></i>
			{{title}}
		</h3>
		
		<!-- #section:pages/invoice.info -->
		<div class="widget-toolbar no-border invoice-info">
			<span class="invoice-info-label">Invoice:</span> <span class="red">#{{number}}</span>
			<br />
			<span class="invoice-info-label">Date:</span> <span class="blue">{{date}}</span>
		</div>
		
		<div class="widget-toolbar hidden-480">
			<a href="#"><i class="ace-icon fa fa-print"></i></a>
		</div>
		<!-- /section:pages/invoice.info -->
	  </div>


	  <div class="widget-body"><div class="widget-main padding-24">
			<div class="row">
				<div class="col-sm-6">
					<div class="row">
						<div class="col-xs-11 label label-lg label-info arrowed-in arrowed-right"><b>Company Info</b></div>
					</div>
					<div>
						<ul class="list-unstyled spaced">
							<li><i class="ace-icon fa fa-caret-right blue"></i>Street, City</li>
							<li><i class="ace-icon fa fa-caret-right blue"></i>Zip Code</li>
							<li><i class="ace-icon fa fa-caret-right blue"></i>State, Country</li>
							<li><i class="ace-icon fa fa-caret-right blue"></i>Phone: <b class="red">111-111-111</b></li>
							<li class="divider"></li>
							<li><i class="ace-icon fa fa-caret-right blue"></i>
								Paymant Info
							</li>
						</ul>
					</div>
				</div><!-- /.col -->
				
				<div class="col-sm-6">
					<div class="row">
						<div class="col-xs-11 label label-lg label-success arrowed-in arrowed-right"><b>Customer Info</b></div>
					</div>
					<div>
						{{#customer}}
						<ul class="list-unstyled  spaced">
							{{#address}}
							<li><i class="ace-icon fa fa-caret-right green"></i>{{.}}</li>
							{{/address}}
							<li class="divider"></li>
							<li><i class="ace-icon fa fa-caret-right green"></i>
								{{contact}}
							</li>
						</ul>
						{{/customer}}
					</div>
				</div><!-- /.col -->
			</div><!-- /.row -->
				
			<div class="space"></div>
			
			<div>

				<table class="table table-striped table-bordered">
					<thead>
						<tr>
							<th class="center">#</th>
							<th>Product</th>
							<th class="hidden-xs">Description</th>
							<th class="hidden-480">Discount</th>
							<th>Total</th>
						</tr>
					</thead>
					
					<tbody>
					{{#products}}
						<tr>
							<td class="center">{{id}}</td>
							<td>{{{name}}}</td>
							<td class="hidden-xs">
								{{description}}
							</td>
							<td class="hidden-480">
							{{#discount}} {{discount}} {{/discount}}
							{{^discount}} --- {{/discount}}
							</td>
							<td>{{total}}</td>
						</tr>
					{{/products}}
					</tbody>
				</table>
				
			</div>
				
			<div class="hr hr8 hr-double hr-dotted"></div>
			
			<div class="row">
				<div class="col-sm-5 pull-right">
					<h4 class="pull-right">
					Total amount : <span class="red">{{total}}</span>
					</h4>
				</div>
				
				<div class="col-sm-7 pull-left">
					Extra Information
				</div>
			</div>
			
			<div class="space-6"></div>
			
			<div class="well">
				Thank you for choosing Ace Company products.
				We believe you will be satisfied by our services.
			</div>
			

		</div></div>
	 </div>
	 <!-- /section:pages/invoice -->
	</div>
</div>
{{/page.invoice}}